<template>
  <div>
    <div class="bd2 flex-col">
      <div class="section6 flex-col">
        <button 
          @click="xinxichaxun"
          :class="{
                btn: true,
                active: activeBtn ===1,
              }"
        >信息查询</button>
         <button 
          @click="yingyongpingtai"
          :class="{
                btn: true,
                active: activeBtn ===2,
              }"
        >应用平台</button>
         <button 
          @click="wangluoanquan"
          :class="{
                btn: true,
                active: activeBtn ===3,
              }"
        >网络安全</button>
         <button 
          @click="wenjianxiazai"
          :class="{
                btn: true,
                active: activeBtn ===4,
              }"
        >文件下载</button>
      </div>
      <div class="pingtailianjieshezhis">
        <div class="section7 flex-col">
          <ul class="itemlist">
            <!-- 信息查询 -->
            <li
            v-show="isShow1"
              v-for="(item, index) in Alllinks"
              :key="item.value"
              class="main2 flex-row"
              style="list-style-type:none"
            >
              <p class="txt9">外部链接{{index+1}}:</p>
              <el-upload
                action="https://rest/www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
                :show-file-list="true"
                @blur="imgBlur(item)"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <p class="tishi1">
                图标: 建议尺寸：
                <span>100*100</span>，支持png,jpg,jpeg格式
              </p>

              <div class="lianjie">
                <input type="text" placeholder="请输入链接名称" v-model="item.sName" class="box3" />
                <input type="text" placeholder="请输入链接地址" v-model="item.sLinkUrl" class="group11" />
              </div>
              <span
                class="delete"
                v-if="index>4"
                :id="item.nLid"
                @click="DeleteLinks (item.nLid)"
              >删除</span>
            </li>
            <!-- 应用平台 -->
                <li
                v-show="isShow2"
              v-for="(item, index) in Alllinks2"
              :key="item.value"
              class="main2 flex-row"
              style="list-style-type:none"
            >
              <p class="txt9">外部链接{{index+1}}:</p>
              <el-upload
                action="https://rest/www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
                :show-file-list="true"
                @blur="imgBlur(item)"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <p class="tishi1">
                图标: 建议尺寸：
                <span>100*100</span>，支持png,jpg,jpeg格式
              </p>

              <div class="lianjie">
                <input type="text" placeholder="请输入链接名称" v-model="item.sName" class="box3" />
                <input type="text" placeholder="请输入链接地址" v-model="item.sLinkUrl" class="group11" />
              </div>
              <span
                class="delete"
                v-if="index>4"
                :id="item.nLid"
                @click="DeleteLinks (item.nLid)"
              >删除</span>
            </li>
         <!-- 网络安全 -->
                <li
                v-show="isShow3"
              v-for="(item, index) in Alllinks3"
              :key="item.value"
              class="main2 flex-row"
              style="list-style-type:none"
            >
              <p class="txt9">外部链接{{index+1}}:</p>
              <el-upload
                action="https://rest/www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
                :show-file-list="true"
                @blur="imgBlur(item)"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <p class="tishi1">
                图标: 建议尺寸：
                <span>100*100</span>，支持png,jpg,jpeg格式
              </p>

              <div class="lianjie">
                <input type="text" placeholder="请输入链接名称" v-model="item.sName" class="box3" />
                <input type="text" placeholder="请输入链接地址" v-model="item.sLinkUrl" class="group11" />
              </div>
              <span
                class="delete"
                v-if="index>4"
                :id="item.nLid"
                @click="DeleteLinks (item.nLid)"
              >删除</span>
            </li>
                       <!-- 文件下载 -->
                <li
                v-show="isShow4"
              v-for="(item, index) in Alllinks4"
              :key="item.value"
              class="main2 flex-row"
              style="list-style-type:none"
            >
              <p class="txt9">外部链接{{index+1}}:</p>
              <el-upload
                action="https://rest/www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
                :show-file-list="true"
                @blur="imgBlur(item)"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>
              <p class="tishi1">
                图标: 建议尺寸：
                <span>100*100</span>，支持png,jpg,jpeg格式
              </p>

              <div class="lianjie">
                <input type="text" placeholder="请输入链接名称" v-model="item.sName" class="box3" />
                <input type="text" placeholder="请输入链接地址" v-model="item.sLinkUrl" class="group11" />
              </div>
              <span
                class="delete"
                v-if="index>4"
                :id="item.nLid"
                @click="DeleteLinks (item.nLid)"
              >删除</span>
            </li>
            <!-- 点击新增时出现 -->
            <li v-show="isShow" class="main2 flex-row" style="list-style-type:none">
              <p class="txt9">外部链接:</p>
              <el-upload
                action="https://rest/www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                list-type="picture-card"
                :on-change="changeFile"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <p class="tubiaots">上传图标</p>
              </el-upload>

              <p class="tishi1">
                图标: 建议尺寸：
                <span>100*100</span>，支持png,jpg,jpeg格式
              </p>

              <div class="lianjie">
                <input type="text" placeholder="请输入链接名称" v-model="sName" class="box3" />
                <input type="text" placeholder="请输入链接地址" v-model="sLinkUrl" class="group11" />
              </div>
            </li>
          </ul>
          <div class="block">
            <span class="demonstration"></span>
          </div>
          <div class="main7 flex-row">
            <el-button class="xinzeng" @click="add">新增</el-button>
            <el-row v-show="isShow1">
              <el-button class="baocun" @click="addLinks1">
                <span>保存</span>
              </el-button>
            </el-row>
              <el-row v-show="isShow2">
              <el-button class="baocun" @click="addLinks2">
                <span>保存</span>
              </el-button>
            </el-row>
            <el-row v-show="isShow3">
              <el-button class="baocun" @click="addLinks3">
                <span>保存</span>
              </el-button>
            </el-row>
            <el-row v-show="isShow4">
              <el-button class="baocun" @click="addLinks4">
                <span>保存</span>
              </el-button>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Coolies from 'js-cookie'
export default {
  data () {
    return {
      // 新增
      isShow: false,
      // 信息查询
      isShow1:true,
      // 应用平台
      isShow2:false,
      isShow3:false,
      isShow4:false,
      Alllinks: [],
       Alllinks2: [],
        Alllinks3: [],
         Alllinks4: [],
      sPictureUrl: '',
      sLinkUrl: '',
      nTid: '2',
      nLid: 1,
      sName: '',
      btnList,
      activeBtn: 1,
      constants: {},
      AllliknsEmpty: [],//获取所有链接信息
      insName: '',
      insLinkUrl: '',
      // nState: 1,
      AllpicturesEmpty: [],//获取所有图片信息
      PostAddpictureEmpty: [],
      fileUpload: null,
    };
  },
  created () {
    this.GetAlllinks1()
        this.GetAlllinks2 ()
        this.GetAlllinks3 ()
        this.GetAlllinks4 ()
  },
  methods: {
    add () {
      this.isShow = true
    },
    // 获取信息查询链接
    async GetAlllinks1 () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 7
        }
      })
      console.log(res);
      this.Alllinks = res
    },
        // 新增图片至服务器s
    async addLinks1 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.sPicUrl)
      formDataImg.append('file', this.fileUpload.raw)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty = res
      this.postAddLinks1()
    },
        // 新增信息查询接口
    async postAddLinks1 () {
      this.isShow = false
      let formData = new FormData()
      formData.append('innTid', 7)
      formData.append('innLid', 0)
      formData.append('insPictureUrl', this.PostAddpictureEmpty)
      formData.append('insLinkUrl', this.sLinkUrl)
      formData.append('insName', this.sName)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      // console.log(res[0].nLid, 'res');
      this.nLid = res
      let adLink = {
        nLid: this.nLid,
        sLinkUrl: this.sLinkUrl,
        sPictureUrl: this.PostAddpictureEmpty,
        sName: this.sName
      }
      this.Alllinks.push(adLink)
      this.Alllinks
      // this.GetAllLinks()
      // this.$router.go(0)
    },


       // 获取应用平台链接
    async GetAlllinks2 () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 8
        }
      })
      console.log(res);
      this.Alllinks2 = res
    },

      // 新增图片至服务器s
    async addLinks2 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.sPicUrl)
      formDataImg.append('file', this.fileUpload.raw)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty = res
      this.postAddLinks2()
    },

     // 新增应用平台接口
    async postAddLinks2 () {
      this.isShow = false
      let formData = new FormData()
      formData.append('innTid', 8)
      formData.append('innLid', 0)
      formData.append('insPictureUrl', this.PostAddpictureEmpty)
      formData.append('insLinkUrl', this.sLinkUrl)
      formData.append('insName', this.sName)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      // console.log(res[0].nLid, 'res');
      this.nLid = res
      let adLink = {
        nLid: this.nLid,
        sLinkUrl: this.sLinkUrl,
        sPictureUrl: this.PostAddpictureEmpty,
        sName: this.sName
      }
      this.Alllinks2.push(adLink)
      this.Alllinks2
   
      // this.GetAllLinks()
      // this.$router.go(0)
    },


  // 获取网络安全链接
    async GetAlllinks3 () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 9
        }
      })
      console.log(res);
      this.Alllinks3 = res
    },
        // 新增图片至服务器s
    async addLinks3 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.sPicUrl)
      formDataImg.append('file', this.fileUpload.raw)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty = res
      this.postAddLinks3()
    },
        // 新增网络安全接口
    async postAddLinks3 () {
      this.isShow = false
      let formData = new FormData()
      formData.append('innTid', 9)
      formData.append('innLid', 0)
      formData.append('insPictureUrl', this.PostAddpictureEmpty)
      formData.append('insLinkUrl', this.sLinkUrl)
      formData.append('insName', this.sName)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      // console.log(res[0].nLid, 'res');
      this.nLid = res
      let adLink = {
        nLid: this.nLid,
        sLinkUrl: this.sLinkUrl,
        sPictureUrl: this.PostAddpictureEmpty,
        sName: this.sName
      }
      this.Alllinks3.push(adLink)
      this.Alllinks3
      // this.GetAllLinks()
      // this.$router.go(0)
    },
 

  // 获取文件下载链接
    async GetAlllinks4 () {
      const { data: res } = await this.$http.get('/api/link/Get_Selectlinks', {
        params: {
          innTid: 10
        }
      })
      console.log(res);
      this.Alllinks = res
    },
        // 新增图片至服务器s
    async addLinks4 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.sPicUrl)
      formDataImg.append('file', this.fileUpload.raw)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty = res
      this.postAddLinks4()
    },
        // 新增文件下载接口
    async postAddLinks4 () {
      this.isShow = false
      let formData = new FormData()
      formData.append('innTid', 10)
      formData.append('innLid', 0)
      formData.append('insPictureUrl', this.PostAddpictureEmpty)
      formData.append('insLinkUrl', this.sLinkUrl)
      formData.append('insName', this.sName)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_Addlink', formData, config)
      // console.log(res[0].nLid, 'res');
      this.nLid = res
      let adLink = {
        nLid: this.nLid,
        sLinkUrl: this.sLinkUrl,
        sPictureUrl: this.PostAddpictureEmpty,
        sName: this.sName
      }
      this.Alllinks4.push(adLink)
      this.Alllinks4
      // this.GetAllLinks()
      // this.$router.go(0)
    },

    // 图片上传成功的回调
    changeFile (file, fileList) {
      this.fileUpload = file
    },
    // 删除链接
    async DeleteLinks (nLid) {
      this.nLid = nLid
      let formData = new FormData()
      formData.append('innLid', this.nLid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/link/Post_deletelink', formData, config)
      console.log(res);
      this.GetAlllinks()
    },
    imgBlur (e) {
      console.log(e, '失去焦点');
      this.nLid = e.nLid
    },
    nameBlur (e) {
      console.log(e, '失焦');
      this.nLid = e.nLid
      this.sName = e.sName
    },
    urlBlur (e) {
      this.nLid = e.nLid
      this.sLinkUrl = e.sLinkUrl
    },
    xinxichaxun(){
      this.activeBtn=1
      this.isShow1=true
      this.isShow2=false
       this.isShow3=false
        this.isShow4=false
    },
    yingyongpingtai(){
      this.activeBtn=2
      this.isShow1=false
      this.isShow2=true
          this.isShow3=false
        this.isShow4=false
    },
    wangluoanquan(){
    this.activeBtn=3
       this.isShow1=false
      this.isShow2=false
          this.isShow3=true
        this.isShow4=false
    },
    wenjianxiazai(){
      this.activeBtn=4
         this.isShow1=false
      this.isShow2=false
          this.isShow3=false
        this.isShow4=true
    }
  },
};
</script>

<style scoped lang="css" src="./assets/index.css" />
